<template>
  <div class="fittedCurve">
    <!-- 图形 -->
    <div class="toolbox">
      <el-checkbox-group v-model="checkList">
        <el-checkbox :label="$t('page.curve')" :disabled="true"/>
      </el-checkbox-group>
      <el-radio-group v-model="radioItem" @input="handleChange">
        <el-radio label="拟合">{{ $t('page.fitting')}}</el-radio>
        <el-radio label="优化">{{ $t('page.optimize') }}</el-radio>
      </el-radio-group>
    </div>
    <linePointDiagram
      :value="originalData"
      :markLine="dissociation"
      @generateImg="shotImg"
    ></linePointDiagram>
  </div>
</template>

<script>
import linePointDiagram from '@/commonPage/linePointDiagram'
import { formatData } from '@/commonPage/linePointDiagram/formatData'
export default {
  components: {
    linePointDiagram
  },
  props: {
    // 原始数据
    originalData1: {
      type: Array,
      default: () => []
    },
    // 拟合数据
    originalData2: {
      type: Array,
      default: () => []
    },
    // 优化后的数据
    originalData3: {
      type: Array,
      default: () => []
    },
    // echarts的标题
    title: {
      type: String,
      default: ''
    },
    resultValue: {
      type: Object,
      default: () => {}
    },
    // 标识线数据
    dissociation: {
      type: Array,
      default: () => [0]
    }
  },
  data() {
    return {
      originalData: {}, // 处理好的数据
      checkList: ['曲线'], 
      radioItem: '拟合'
    }
  },
  methods: {
    handleChange(value = '拟合') {
      if(value === '拟合') {
        this.originalData = {
          ...formatData(this.originalData2[0], '拟合'),
          ...formatData(this.originalData1[0]),
        }
      } else {
        this.originalData = {
          ...formatData(this.originalData3[0], '优化'),
          ...formatData(this.originalData1[0]),
        }
      }
    },
    // 返回生成图片base64
    shotImg(url) {
      this.$emit('showImg', url)
    }
  },
  watch: {
    originalData1: {
      handler() {
        this.$nextTick(() => {
          setTimeout(() => {
            this.handleChange()
          }, 500);
        })
      },
      deep: true,
      immediate: true
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color:#409eff;
    border-color: #409eff;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
  }
  .el-checkbox__input.is-disabled+span.el-checkbox__label {
    color: #409eff;
  }
}
.fittedCurve {
  display: flex;
  flex-direction: column;
  .toolbox {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    ::v-deep {
      .el-radio-group {
        margin-left: 20px;
      }
    } 
  }
}
</style>